<template>
  <div>
    <template>
      <!-- color 颜色 -->
      <!-- title  tab名称 -->
      <!-- switch 开关 -->
      <!-- color2  双颜色 -->
      <!-- transparency  透明度调整 -->
      <div class="attr-item-edit-wrapper" v-for="(item, index) in formList" :key="item.title + index">
        <template v-if="item.type=='title'">
          <p class="attr-item-title">{{item.title}}</p>

          <div class="col-1 attr-item-edit-input">
            <el-input placeholder="系列名" v-model="config.name" size="mini" class="input-with-select">
            </el-input>
          </div>
        </template>
        <template v-else-if="item.type=='color'">
          <p class="attr-item-title">{{item.title}}</p>

          <div class="col-1 attr-item-edit-input">
            <template v-if="item.route=='lineStyle'">
              <el-input placeholder="颜色" v-model="lineStyle.color" size="mini" class="input-with-select">
              </el-input>
              <el-color-picker class="colorChoose" size="mini" v-model="lineStyle.color"></el-color-picker>
            </template>
            <template v-if="item.route=='itemStyle'">
              <el-input placeholder="颜色" v-model="itemStyle.color" size="mini" class="input-with-select">
              </el-input>
              <el-color-picker class="colorChoose" size="mini" v-model="itemStyle.color"></el-color-picker>
            </template>
          </div>
        </template>
        <template v-else-if="item.type=='switch'">
          <p class="attr-item-title">{{item.title}}</p>

          <div class="col-3 attr-item-edit-input textLeft">
            <el-switch v-model="areaColorShow" size="mini">
            </el-switch>
          </div>
        </template>
        <template v-else-if="item.type=='color2' & areaColorShow ">
          <p class="attr-item-title">{{item.title}}</p>

          <div class="col-2 attr-item-edit-input">
            <el-input placeholder="颜色" v-model="nowAreaStyle.topColor" size="mini" class="input-with-select">
            </el-input>
            <el-color-picker class="colorChoose" size="mini" v-model="nowAreaStyle.topColor" color-format="rgb"
              :show-alpha="true"></el-color-picker>
          </div>
          <div class="col-2 attr-item-edit-input">
            <el-input placeholder="颜色" v-model="nowAreaStyle.bottomColor" size="mini" class="input-with-select">
            </el-input>
            <el-color-picker class="colorChoose" size="mini" v-model="nowAreaStyle.bottomColor" color-format="rgb"
              :show-alpha="true"></el-color-picker>
          </div>
        </template>
        <template v-else-if="item.type=='transparency' & areaColorShow ">
          <p class="attr-item-title">{{item.title}}</p>

          <div class="col-1 attr-item-edit-input">
            <el-slider v-model="nowAreaStyle.transparency" show-input :min="0" :max="1" input-size="mini" :step="0.1">
            </el-slider>
          </div>
        </template>
      </div>
    </template>
  </div>
</template>

<script>
  const echarts = require('echarts/lib/echarts');

	export default {
		props: {
      config: {
        type: Object,
      },
      formList: Array
		},
		components: {
      
		},
    computed: {
      lineStyle(){
        if (this.config.lineStyle) {
          return this.config.lineStyle
        }else{
          return {color:'#000'}
        }
      },
      itemStyle(){
        if (this.config.itemStyle) {
          return this.config.itemStyle
        }else{
          return {color:'#000'}
        }
        
      },
      areaStyle(){
        if (this.config.itemStyle) {
          return this.config.itemStyle
        }else{
          return {color:'#000'}
        }
      },
		},
    data() {
      return {
        num: 1,
        areaColorShow:true,
        nowAreaStyle:{
        }

      }
    },
    watch: {
      areaColorShow: {
        deep: true,
        handler: function (newV, oldV) {
          console.log('123');
          if (!newV) {
            this.config.areaStyle.opacity = 0
          } else {
            this.config.areaStyle.opacity = this.nowAreaStyle.transparency
          }
        }
      },
      nowAreaStyle: {
        deep: true,
        handler: function (newV, oldV) {
          this.config.areaStyle = {
            opacity: this.nowAreaStyle.transparency,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: this.nowAreaStyle.topColor
            }, {
              offset: 1,
              color: this.nowAreaStyle.bottomColor
            }])
          }
        }
      }
    },
    created() {
		},
    mounted() {
      this.formList.forEach(element => {
        if (element.type == 'color2') {
          this.nowAreaStyle = {
            topColor:this.config.areaStyle.color.colorStops[0].color,
            bottomColor:this.config.areaStyle.color.colorStops[1].color,
            transparency:this.config.areaStyle.opacity
          }
        }
      });
       
    },
		
    methods:{
    }
	}
</script>

<style lang="scss">
// .el-select{
//   width: 100%;
// }
.colorLabel{
  float: right;
}
.el-color-picker__trigger{
  border: 0;
}
.textRight{
  text-align: right;
}
.textLeft{
  text-align: left;
}
.attr-item-edit-input{
  position: relative;
  .colorChoose{
    position: absolute;
    right: 0;
  }
}
</style>
<style lang="scss">
// .el-select{
//   width: 100%;
// }
.el-color-picker__trigger{
  border: 0;
}
.textRight{
  text-align: right;
}
.textLeft{
  text-align: left;
}
.attr-item-edit-input{
  position: relative;
  .colorChoose{
    position: absolute;
    right: 0;
  }
}
</style>
<style lang="scss" scoped>
  .sizeAndPosition-wrapper {
    display: flex;
    width: 100%;
  }

  .align-type-item {
    flex: 1;
    cursor: pointer;
    text-align: center;
    &.clearFlex {
      width: 42px;
      flex: none;
    }
    i {
      line-height: 1;
      display: inline-block;
      padding: 6px;
      border-radius: 4px;
      background: rgba(37, 165, 137, 0.08);
    }
    &:hover {
      i {
        color: white;
        background: $primary;
      }
    }
  }

  .attr-item-edit-wrapper {
    padding-left: 18px;
    display: flex;
    width: 100%;
    // text-align: center;
    padding-bottom: 10px;
    .attr-item-title {
      text-align: left;
      min-width: 60px;
      font-size: 12px;
    }
    .attr-item-edit-input {
      &.col-2 {
        width: 90px;
        margin-left: 10px;
      }
      &.col-1 {
        width: 190px;
        margin-left: 10px;

      }
      &.col-3 {
        width: 60px;
        margin-left: 10px;
      }
      &.col-4 {
        width: 50px;
        margin-left: 10px;
      }
      .attr-item-edit-input-des {
        text-align: center;
        line-height: 1;
        margin-top: 2px;
        font-size: 12px;
        color: $gray;
      }
    }
  }
</style>
<style lang="scss">
  .attr-item-edit-wrapper {
    .el-input-number.is-controls-right .el-input__inner {
      padding-left: 2px;
      padding-right: 32px;
      width: 90px;
    }
    .el-input-number--mini {
      width: 90px;
    }
    .el-slider__runway.show-input {
      margin-right: 108px;
    }
  }
</style>